<template>
	<view class="gridContent">
		<!-- 背景圖 -->
		<!-- <image class="backImage" src="https://app.yycjkb.cn/index/fujiajia/矩形111.png" mode="widthFix"></image> -->

		<view class="container">
			<headerView :title='title' :backBtn="false"></headerView>
			<view class="search-bar">
				<image class="search-icon" src="https://app.yycjkb.cn/index/fujiajia/search.png" mode=""></image>
				<input type="text" placeholder="請輸入搜索內容" />
			</view>
			<view class="menuContainer">
				<!-- 左侧分类菜单 -->
				<scroll-view class="side-menu" scroll-y :style="{ transform: `translateY(${dragOffsetY}px)` }">
					<view v-for="(item, index) in category" :key="index"
						:class="['menu-item', { 'active': selectIndex2 === index }]" @tap="selectCategory(index);showChild(item.childlist,item.name,index)">
						{{ item.name }}
					</view>
				</scroll-view>

				<!-- 右侧内容展示 -->
				<scroll-view class="content" scroll-y>
					<transition-group name="fade-scale" tag="view" class="grid">
						<view class="grid-item" @tap="productList(item.id,item.name)" v-for="(item, index) in childCategory" :key="index">
							<image class="item-image" :src="'/static/img/goods_thumb_0'+(index+1)+'.png'" mode="aspectFill"></image>
							<text class="item-title">{{ item.name }}</text>
						</view>
					</transition-group>
				</scroll-view>
			</view>
		</view>

		<!-- 底部tabbar -->
		<tabBar :selectIndex="selectIndex"></tabBar>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import headerView from "@/newsPage/components/header/header.vue"
	import tabBar from "@/newsPage/components/tabBar/index.vue";

	import shop from '@/api/shop';
	// import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			tabBar,
			headerView
		},
		data() {
			return {
				startY: 0,
				dragOffsetY: 0,
				scrollTop: 0,
				touchDistance: 0,
				title: "分类",
				selectIndex: 1,
				selectIndex2: 0, // 当前选中的分类索引
				current: 0,
				height: 0,
				category: [],
				childCategory: [],
				categoryname: ''
			};
		},
		onReady() {
			// setTimeout(()=>{
			//   uni.hideTabBar()  
			// },100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec()


		},
		onLoad() {
			this.getCategory()
		},
		computed: {
			// 当前选中的分类对应的商品列表
			currentItems() {
				return this.items[this.selectIndex2] || [];
			}
		},
		methods: {
			// 选择分类
			selectCategory(index) {
				this.selectIndex2 = index;
			},
			showChild(item, name, index) {
				this.childCategory = item
				this.categoryname = name
				this.current = index
			},
			getCategory() {
				shop.getCategory().then(res => {
					console.log(res)
					this.category = res.data.categoryModules
					this.childCategory = this.category[0].childlist
					this.categoryname = this.category[0].name
					uni.hideLoading();
				})
			},
			productList(category_id, category_name) {
				
				// #ifdef APP-PLUS
				plus.runtime.openURL(`https://www.yycjkb.cn/dist/#/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`)
				// #endif
				
				// #ifdef H5
				location.href = `https://www.yycjkb.cn/dist/#/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`
				// #endif
				
			},
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 付款码点击
			 */
			onPayCode() {
				uni.navigateTo({
					url: '/pages/PaymentCode/PaymentCode'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	html,
	page {
		background-color: #fff;
	}

	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.gridContent {
		height: calc(100vh - 140rpx);
		overflow: hidden;
	}

	.container {
		height: calc(100vh - 100rpx);
	}

	.search-bar {
		width: 456rpx;
		border-radius: 40rpx;
		overflow: hidden;
		margin: 30rpx auto;
		background-color: #e2e2e2;
		padding: 10rpx 0;
		display: flex;
		align-items: center;

		.search-icon {
			margin: 0 20rpx;
			margin-right: 10rpx;
			width: 47rpx;
			height: 47rpx;
			filter: brightness(0);
		}

		input {
			width: 80%;
			margin: auto;
			font-size: 24rpx;
		}
	}

	.menuContainer {
		display: flex;

		.side-menu {
			width: 200rpx;
			background-color: #f8f8f8;
			height: 100vh;
			transition: transform 0.2s ease;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}

			.menu-item {
				padding: 20rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;

				&.active {
					background-color: #fff;
					color: #000;
					font-weight: bold;
				}
			}
		}

		.content {
			margin-bottom: 40rpx;
			flex: 1;
			padding: 20rpx;

			.grid {
				display: flex;
				flex-wrap: wrap;
			}

			.grid-item {
				width: 33.33%;
				padding: 10rpx;
				box-sizing: border-box;

				.item-image {
					width: 100%;
					height: 150rpx;
					border-radius: 10rpx;
				}

				.item-title {
					display: block;
					text-align: center;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.fade-scale-enter-active,
	.fade-scale-leave-active {
		transition: all 0.3s ease;
	}

	.fade-scale-enter,
	.fade-scale-leave-to {
		opacity: 0;
		transform: scale(0.9);
	}
</style>